<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE HTML>
<ui:composition xmlns="http://www.w3c.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" 
xmlns:ui="http://java.sun.com/jsf/facelets" 
xmlns:p="http://primefaces.org/ui" 
xmlns:f="http://java.sun.com/jsf/core" 
template="/paginas/templates/principal.xhtml">
	<ui:define name="conteudo">
	
		<h:form>
			<!-- Main Area -->
			<!-- Slider -->
			<div class="row-fluid">
				<div class="span12" id="slider">
					<!-- Top part of the slider -->
					<div class="row">
						<div class="span6" id="carousel-bounding-box">
							<div id="myCarousel" class="carousel slide">
								<!-- Carousel items -->
								<div class="carousel-inner">
									<ui:repeat var="imagem" value="#{homeControlador.anuncio.imagens}" varStatus="status">
										<div class="item" data-slide-number="#{status.index}">
											<img src="../pics/#{imagem.urlimagem}" width="550" height="400" />
										</div>
									</ui:repeat>
								</div>
								<!-- Carousel nav -->
								<!-- <a class="carousel-control left" href="#myCarousel" data-slide="prev">&#8249;</a>
								<a class="carousel-control right" href="#myCarousel" data-slide="next">&#8250;</a> -->
							</div>
						</div>
						<div class="span6" id="carousel-text"></div>
						<div style="display: none;" id="slide-content">
							<div id="slide-content-0">
								<table class="table table-striped">
									<tr>
										<td>
											<p>Marca</p>
										</td>
										<td>
											<p>
												<h:outputText value="#{homeControlador.anuncio.veiculo.modelo.marca.nome}" />
											</p>
										</td>										
									</tr>
									<tr>
										<td>
											<p>Veiculo</p>
										</td>
										<td>
											<p>
												<h:outputText value="#{homeControlador.anuncio.veiculo.modelo.nome} #{homeControlador.anuncio.veiculo.anoVersao}" />
											</p>
										</td>										
									</tr>
									<tr>
										<td>
											<p>Preco</p>
										</td>
										<td>
											<p>
												<h:outputText value="R$" />
												<h:outputText value="#{homeControlador.anuncio.preco}">
													<f:converter converterId="moneyConverter"></f:converter>
												</h:outputText>
											</p>
										</td>										
									</tr>
									<tr>
										<td>
											<p>Quilometragem</p>
										</td>
										<td>
											<p>
												<h:outputText value="#{homeControlador.anuncio.quilometragem}">
													<f:convertNumber locale="pt_BR" />
												</h:outputText>
											</p>
										</td>										
									</tr>
									<tr>
										<td>
											<p>Cor</p>
										</td>
										<td>
											<p>
												<h:outputText value="#{homeControlador.anuncio.veiculo.cor}" />
											</p>
										</td>										
									</tr>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--/Slider-->
			
			<div class="row hidden-phone" id="slider-thumbs">
				<div class="span12">
					<!-- Bottom switcher of slider -->
					<ul class="thumbnails">
						<ui:repeat var="imagem" value="#{homeControlador.anuncio.imagens}" varStatus="status">
							<li class="span2">
								<a class="thumbnail" id="carousel-selector-#{status.index}">
									<img src="../pics/#{imagem.urlimagem}" />
								</a>
							</li>
						</ui:repeat>
					</ul>
				</div>
			</div>
			
			<!-- <div class="row">
				<div class=""></div>
				<div class="thumbnail">
					<p:gmap  center="41.381542, 2.122893" zoom="15" type="HYBRID"
						style="width:100%;height:400px" streetView="true"/>
					<div class="caption">
						<p><h:outputText value="Cidade: #{homeControlador.anuncio.cidade}" /></p>
						<p><h:outputText value="Cidade: #{homeControlador.anuncio.cidade}" /></p>
					</div>
				</div>
			</div> -->
			
			<div class="row">
				<h:panelGrid>
					<m:map width="500px" height="500px"
						address="Giza, Egypt">
						<m:marker />
						<m:htmlInformationWindow htmlText="Giza, Egypt" />
					</m:map>
				</h:panelGrid>
			</div>
			
			<script type="text/javascript">
				$('div.item:first').attr('class', 'active item');

				$(document).ready(function($) {
					$('#myCarousel').carousel({
						interval : 5000
					});
					$('#carousel-text').html($('#slide-content-0').html());
					//Handles the carousel thumbnails
					$('[id^=carousel-selector-]').click(function() {
						var id_selector = $(this).attr("id");
						var id = id_selector.substr(id_selector.length - 1);
						var id = parseInt(id);
						$('#myCarousel').carousel(id);
					});
					// When the carousel slides, auto update the text
					/* $('#myCarousel').on('slid', function (e) {
					    var id = $('.item.active').data('slide-number');
					    $('#carousel-text').html($('#slide-content-'+id).html());
					}); */
				});
			</script>
		</h:form>
	</ui:define>
</ui:composition>